<template>
  <div class='container'>
    <el-dialog
  :title="pageTitle"
  :visible="dialogShowLook"
  @close="close"
  width="50%"
  >
  <div class="top">
    <el-row class="damajin">
      <el-col :span="6">【题型】：{{form.questionType === 1?'单选':'多选'}}</el-col>
        <el-col :span="6">【编号】：{{form.id}}</el-col>
          <el-col :span="6">【难度】：{{form.difficulty === 1?'简单':'一般'}}</el-col>
            <el-col :span="6">【标签】：{{form.tags}}</el-col>

    </el-row>
    <el-row>
      <el-col :span="6">【学科】：{{form.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{form.directoryName}}</el-col>
          <el-col :span="6">【方向】：{{form.direction}}</el-col>
    </el-row>
  </div>
 <el-divider/>
  <div class="tigan">
    <p>【题干】</p>
    <p v-html="form.question"></p>
    <p>多选题 选项：（以下选中的选项为正确答案）</p>
   <div v-if="form.options.length">
     <el-checkbox style="display:block" v-model="checked[index]" v-for="(item,index) in form.options" :key="item.id"></el-checkbox>
   </div>
  </div>
  <el-divider/>
  <p>【参考答案】： <el-button type="danger">视频答案预览</el-button></p>
   <el-divider/>
   <span>【答案解析】：</span><p  v-html="form.answer" style="display:inline-block" ></p>
   <el-divider/>
   <p>【答案备注】：{{form.remarks}}</p>
</el-dialog>
  </div>
</template>
<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsPreview',
  data () {
    return {
      pageTitle: '题目预览',
      form: {
        options: []
      },
      checked: [false, false, false, false]

    }
  },
  props: ['dialogShowLook'],
  methods: {
    close () {
      this.$emit('update:dialogShowLook', false)
    },
    async hanldeEditForm (id) {
      this.form.id = id
      try {
        const { data } = await detail(this.form)
        if (data) {
          this.form.questionType = data.questionType
          this.form.difficulty = data.difficulty
          this.form.tags = data.tags
          this.form.subjectName = data.subjectName
          this.form.directoryName = data.directoryName
          this.form.direction = data.direction
          this.form.question = data.question
          this.form.options = [...data.options]
          this.form.answer = data.answer
          this.form.remarks = data.remarks
        }
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.top{

  margin-top: 20px;
  .damajin{
    margin-bottom: 15px;
  }
}
/deep/ .el-dialog__body{
  padding-top: 0px;
}
.container{
  .articleContent{
    height: 100px;
    background-color: #f5f5f5;
    line-height: 100px;
  }
}
</style>
